<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <link type="text/css" href="resources/css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
        <link rel="stylesheet" media="screen" href="resources/css/jquery.timepickr.css" type="text/css" />

        <link type="text/css" href="resources/css/carpool.css" rel="stylesheet" />
        <title>Dar Boleia</title>

        <script type="text/javascript" src="resources/js/jquery-1.3.2.js"></script>
        <script type="text/javascript" src="resources/js/jquery-ui-1.7.1.custom.min.js"></script>
        <script type="text/javascript" src="resources/js/carpool.js"></script>
        <script type="text/javascript" src="resources/js/jquery.timepickr.js"></script>
        <script type="text/javascript" src="resources/js/jquery.jmap.js"></script>

        <script type="text/javascript">


            $(document).ready( function() {

                $("#ui-tabs-nav").tabs();
            });

        </script>
    </head>
    <body>
        <div id="ui-tabs-nav" style="height: 430px; width: 520px; background:transparent; left: 10px;">
            <ul>
                <li><a href="#fragment-1"><span>trajecto</span></a></li>
                <li><a href="#fragment-2"><span>data e hora</span></a></li>
                <li><a href="#fragment-3"><span>veiculo/passageiros</span></a></li>
                <li><a href="#fragment-4"><span>confirmação</span></a></li>
            </ul>
            <form id="boleia" action="post">
            <div id="fragment-1">              
                <script type="text/javascript">
                    $(function() {
                        $("#pontos").sortable({
                            revert: true
                        });
                        $("ul, li").disableSelection();
                    });
                </script>

                <ul id="pontos">
                    <li id="ponto1" class="ui-state-default">Ponto de Passagem: <input type="text" value="Avenida Fernão Magalhães"><a href="#" onclick='$("ul#pontos li#ponto1").remove();'>x</a></li>
                    <li id="ponto2" class="ui-state-default">Ponto de Passagem: <input type="text" value="Santa Cruz"><a href="#" onclick='$("ul#pontos li#ponto2").remove();'>x</a></li>
                </ul>
                <script type="text/javascript">
                    var c = 3;
                    
                    function adicionarPonto() {
                        var ul = document.getElementById('pontos');
                        var nLi = document.createElement('li');
                        var nLiId = 'ponto'+c;
                        nLi.setAttribute('id',nLiId);
                        nLi.setAttribute('class','ui-state-default');
                        var html = 'Ponto de Passagem: <input type="text" value="" /><a href="#" onclick=\'$("ul#pontos li#ponto'+c+'").remove();\'>x</a>';
                        nLi.innerHTML = html;
                        ul.appendChild(nLi);
                        c = c + 1;
                    }
                </script>
                <a href="#" onclick="adicionarPonto()">Adicionar nova paragem</a>
                <button id="query-submit-1">Encontre o caminho</button>

                <div style="overflow:auto; height: 280px; width: 500px ">
                    <div id="mapa" class="jmap"></div>
                    <div id="direccoes"></div>
                </div>
                <div style="padding:5px;"><button id="confirma">Confirma trajecto</button></div>
                
                <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;&div=mapa&key=ABQIAAAApCYnM8S-TSRBhQk16Ynr4BTpH3CbXHjuCVmaTc5MkkU4wO1RRhTDHHVxsVRxIzxPFaQpyblxObvHbw" type="text/javascript"></script>
                <script type="text/javascript">

                    var pontos = new Array();

                    function procuraMorada(result) {
                        //jQuery('#info').html("Info:" + result);
                        var valid = Mapifies.SearchCode(result.getStatus());
                        if (valid.success) {
                            jQuery.each(result.Placemark, marcarPonto(i,point));
                        } else {
                            jQuery('#suggestionsBox').val(valid.message);
                        }
                    }

                    function marcarPonto(i, point){
                        jQuery('#mapa').jmap('AddMarker',{
                            'pointLatLng':[point.Point.coordinates[1], point.Point.coordinates[0]],
                            'pointHTML':point.address
                        });
                    }

                    function getQuery(){
                        var query = '';
                        var oUl = document.getElementById("pontos");
                        var oLi = oUl.getElementsByTagName('li');
                        for (var i = 0; i < oLi.length; i++){
                            var input = oLi[i].getElementsByTagName('input');
                            if (i == 0)
                                query += 'from: ' + input[0].value + ', Coimbra';
                            else
                                query += ' to: ' +  input[0].value + ', Coimbra';
                        }
                        return query;
                    }

                    function procurarCaminho(){
                        var query = getQuery();
                        http://maps.google.com/maps/geo?
                        jQuery('#mapa').jmap('SearchDirections', {
                            'query': query,
                            'locale': 'pt',
                            'panel':'#direccoes',
                            'clearLastSearch' : true
                        }, procuraMorada);
                        return false;
                    }

                    function confirma(){

                        var form = document.getElementById('boleia');
                        
                        var oUl = document.getElementById('pontos');
                        var oLi = oUl.getElementsByTagName('li');
                        for(var c = 0; c<oLi.length; c++){
                            var input = oLi[c].getElementsByTagName('input');
                            var address = input[0].value + ',Coimbra';

                            jQuery('#mapa').jmap('SearchAddress', {
                                'query': address,
                                'returnType': 'getLocations'
                            }, function(result, options) {
                                var valid = Mapifies.SearchCode(result.Status.code);
                                if (valid.success) {
                                    jQuery.each(result.Placemark, function(i, point){
                                        //var div = document.getElementById('coordenadas');
                                        var inputPoint = document.createElement('input');
                                        inputPoint.setAttribute('value',point.Point.coordinates[1] + "," + point.Point.coordinates[0]);
                                        inputPoint.setAttribute('name', 'coordenadas[]');
                                        inputPoint.setAttribute('type', 'text');
                                        inputPoint.setAttribute('style', 'visibility:hidden');
                                        form.appendChild(inputPoint); });
                                } else {
                                jQuery('#address').val(valid.message);
                                }
                            });
                            
                        }
                        return false;
                    }

                    function pronto(){
                        jQuery('#mapa').jmap('init', {'mapType':'hybrid','mapCenter':[40.211491, -8.429201]});
                        jQuery('#query-submit-1').click(procurarCaminho);

                        jQuery('#confirma').click(confirma);

                    }

                    jQuery(document).ready(pronto);

                    </script>

            </div>
            <div id="fragment-2">
                <script type="text/javascript">
                    $(function() {
                        $("#datepicker").datepicker();
                    });

                       $(function(){
                        $('#test-2').timepickr();
                    });
                    $(function(){
                        $('#test-1').timepickr();
                    });
                </script>
                <div class="demo" id="demo">


                    <p><input id="datepicker" readonly="yes" type="text" value="data"></p>
                    <p><input id="test-1" type="text" readonly="yes" value="hora de partida"></p>
                    <p><input id="test-2" type="text" readonly="yes" value="hora de chegada"></p>
                </div><!-- End demo -->

                <div style="display: none;" class="demo-description">

                    <p>The datepicker is tied to a standard form input field.  Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.  Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>

                </div><!-- End demo-description -->
                <input type="button" class="button" name="commit" value="Confirmar data e hora" style="top: 280px; background:white; left: 340px; position:absolute;" />

            </div>
            <div id="fragment-3">
                <div id="v">
                    Veiculo
                </div>
                <div id="np">
                    Número de Passageiros
                </div>
                <input type="text" id="veiculo" name="veiculo" onKeyUp="lookUser(this.value);"/>

                <div class="suggestionsBox" id="suggestions" style="display: none;">
                    <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
                    <div class="suggestionList" id="autoSuggestionsList">

                    </div>
                </div>
                <input type="text" id="numeroP" name="numeroP" onKeyUp="lookUser(this.value);"/>

                <div class="suggestionsBox" id="suggestions" style="display: none;">
                    <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
                    <div class="suggestionList" id="autoSuggestionsList">

                    </div>
                </div>
                <input type="button" class="button" onclick="fillConfirmacao()" name="commit" value="Confirmar veiculo/passageiros" style="top: 280px; background:white; left: 280px; position:absolute;" />

            </div>

            <div id="fragment-4">
                <div id="o"style="top: 98px;">
                    Ponto de partida
                </div>
                <input type="text" readonly="yes" id="partida" name="partida"/>

                <div id="o"style="top: 98px; left: 250px;">
                    Ponto de chegada
                </div>
                <input type="text" readonly="yes" id="chegada" name="chegada"/>


                <div id="o"style="top: 178px;">
                    Data
                </div>
                <input type="text" readonly="yes" id="data" name="data"/>
               <!--<input type="button" onclick="fillConfirmacao()" value="BOTAO"/>-->

                <div id="o"style="top: 218px;">
                    Hora de partida
                </div>
                <input type="text" readonly="yes" id="hora_p" name="hora_p" style="top: 230px;" />

                <div id="o"style="top: 218px; left: 250px;">
                    Hora de chegada
                </div>
                <input type="text" readonly="yes" id="hora_c" name="hora_c" style="top: 230px;" />

                <div id="o"style="top: 298px;">
                    Veiculo
                </div>

                <input type="text" readonly="yes" id="veiculo12" name="veiculo12"/>

                <div id="o"style="top: 338px;">
                    Número de passageiros
                </div>

                <input type="text" readonly="yes" id="num_p" name="num_p" style="top: 352px;"/>
                <input type="button" class="button" name="commit" value="Confirmar boleia" style="top: 380px; background:white; left: 370px; position:absolute;" />

            </div>
            </form>
        </div>


    </body>
</html>
